<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>blob对象实现文件的下载和图片预览</title>
  <!-- blob :是二进制大对象，长度不可更改的 -->
  <style>
    *,
    *::after,
    *::before {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      min-height: 100vh;
    }

    :root:focus-within {
      scroll-behavior: smooth;
    }

    body {
      min-height: inherit;
    }
  </style>
</head>

<body>
  <!-- 注意当 a 标签中，hrer是属于同源的，且存在 download 那么就可以下载了 -->
  <a id="btn" href="" download="下载文件.html">下载文件</a>
  <input type="file" name="ipt" id="ipt">
  <input type="file" name="ipt1" id="ipt1">图片预览
  <input type="file" name="ipt2" id="ipt2">使用异步的方法读取图片资源了吧
</body>
<script>
  "use strict"; {
    let blob = new Blob();
    console.log(blob);

    // 使用 blob 存储数据
    let str = "123";
    let blob1 = new Blob([str], {
      type: "text/plain"
    });
    console.log(blob1);

    // 以文本的方式读取 blobl
    blob1.text().then(res => {
      console.log(res);
    });
  }; {
    // blob 存储html文本，并实现下载文件
    let str = `
    <div>
      <div>
        <p>好的了吧</p>
      </div>
    </div>`;

    let blob = new Blob([str], {
      type: "text/html"
    });

    btn.onclick = function (e) {
      // 将 blob 的数据变成 url（本地资源，变成本地资源数据）
      this.href = URL.createObjectURL(blob);
    };
  }; {
    // 实现下载图片
    let ipt = document.getElementById("ipt");
    ipt.addEventListener("change", e => {
      let file = e.target.files[0];
      let a = document.createElement("a");
      a.setAttribute("download", "下载文件.jpg");
      a.setAttribute("href", URL.createObjectURL(file));
      a.click();
    });
  }; {
    // 实现图片预览
    let ipt = document.getElementById("ipt1");
    ipt.addEventListener("change", e => {
      let file = e.target.files[0];

      let img = new Image();
      // createObjectURL 是同步的方法的，可能会阻塞的，最好使用异步的方法
      img.src = URL.createObjectURL(file);
      document.body.appendChild(img);
    });
  }; {
    // 使用异步的方法读取图片资源了吧
    document.getElementById("ipt2").addEventListener("change", e => {
      let file = e.target.files[0];

      let img = new Image();
      let read = new FileReader();

      read.addEventListener("load", () => {
        img.src = read.result;
        document.body.append(img);
      });
      read.readAsDataURL(file);
    });

  };
</script>

</html>